<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!--  2 组件的使用  当标签使用 使用组件的名字 -->

        <counter></counter>
        <counter></counter>
        <hr>
        <counter2></counter2>

        <hr>
        <!-- <HelloWorld></HelloWorld> -->

     
        <hello-world></hello-world>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        // 组件是可以复用的vue  实例     
        //   vue  实例有的东西   组件是否都有      vue 实例有的东西  组件都有

        // Vue.component('组件名称', { })     第1个参数是标签名称，第2个参数是一个选项对象

        // 全局的组件 
        // 1 组件的定义 
        Vue.component('counter', {
            template: '<div> 我是一个全局组件</div>'
        })
        

        // 组件的注意事项 

        // 1 组件模板必须是单个根元素
        // 2  组件的里面定义的数据 必须是一个函数 而且 函数必须return 一个对象 
        // 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝(闭包)
        // 3  组件模板的内容可以是模板字符串
        // 4  组件的定义 驼峰命名 那么在使用的时候    第一种情况在是 app html 使用 必须采用 
        // - 短横线的形式  使用    HelloWorld---> hello-world
        // 第二种情况 :   如果组件 采用大驼峰命名 那么是模块字符串中  使用  直接使用大驼峰 写法

        Vue.component('counter2',{
            data(){
                return {
                    msg:'我是一个全局组件 counter2 '
                }
            },

            template:`
            <div>
                <span> 我是组件2  ----{{msg}}</span>
                <h2> 我是张三组件</h2>
             
                <HelloWorld></HelloWorld>

            </div>  
             `
        })


        Vue.component('HelloWorld',{
            template:"<div> hello 基本组件</div>"
        })




        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            mounted() { },
            computed: {},
            watch: {}
        });
    </script>
</body>

</html>